<template>
  <div>
    <div class="el-container card-container" :class="{'active':activeIndex==index}" v-for="(item,index) in data" @click="handleClick(index)">
      <div class="card-pic">
        <img style="width:3.4rem;height:3.4rem" :src="require('@/assets/images/'+item.img)" alt="">
      </div>
      <div class="card-text">
        <p class="card-title">{{item.title}}</p>
        <p class="card-sub-title"><span>数据源:</span><span class="card-num">{{ item.value }}</span></p></div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'tabList',
  props:{
    data:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return {
      activeIndex:0
    }
  },
  methods:{
    handleClick(index){
      this.activeIndex=index;
      this.$emit('handleClick',index)
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container{
  display:flex;
  justify-content: space-around;
  align-items: center;
  padding:5px 10px;
  border:1px solid #e8e8e8;
  border-radius:4px;
  cursor: pointer;
}
.active{
  border-color:#4B6EEF;
  background:#EDF0FD;
}
.card-num{color:#2979ff}
</style>
